<script setup lang='ts'>
// 自定义 规则
interface Search {
    title: string,
    path: string,
    promise?: Promise<Search>,
    imageUrl: string
}

import { ref, defineEmits, defineProps } from 'vue';
import Bottom from '@/components/bottom/index.vue'
import AliIcon from '@/components/AliIcon/index.vue'
import { useMarkerStore, useNotepadStore } from '@/store/index';
import { https } from '@/api/api'
import { navigateTo, showToast, authManage, authStaff } from '@/public'
const markerStore = useMarkerStore();
const notepadStore = useNotepadStore()
const props = defineProps({
    isShow: {
        type: Boolean,
        default: () => false
    },
    isShare: {
        type: Boolean,
        default: () => true
    }
});
const imgPrefix = import.meta.env.VITE_BASE_URL + 'img/followup/'
/**
 * @property 变量
 */
const emits = defineEmits(['nav', 'delete', 'close'])
// 记事本列表
const notShow = ref(false);
// const recordList = ref<Array<NotepadItem>>([]);
const isDeleteShow = ref(false);
// 记录要删除的id
const recordID = ref<string>('');
// 是否展开
const isRetract = ref<boolean>(false);

/**
 * @property  所有请求以api开头 如:apiDataInfo
 */
const apiDelete = async () => {
    const res = await https({
        mode: 'marker',
        name: 'apiDelMarker',
        data: {
            mid: markerStore.marker?.mid + ''
        }
    })
    showToast(res.data.msg)
    if (res.code !== 0) return;
}
// 指定记事记录
const apiNotepadRecord = async () => {
    await notepadStore.apiNotepadRecord();
}
// 删除指定的回访记录
const apiDelFollowUp = async () => {
    const res = await https({
        mode: 'notepad',
        name: 'apiDelFollowUp',
        data: {
            fuid: recordID.value
        }
    });
    showToast(res.data.msg);
    isDeleteShow.value = false;
    if (res.code !== 0) return;
    //  前端删除操作
    notepadStore.deleteNotepad(Number(recordID.value))
}
/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */

const clickDeleteMarker = async () => {
    uni.showModal({
        title: '删除标记点',
        content: '确定删除标记点' + markerStore.marker.name + '吗?',
        success: async (error) => {
            if (error.confirm) {
                await apiDelete();
                emits('delete', markerStore.marker?.mid)
            }

        }
    })

}
// 点击编辑
const clickEdit = (type: string) => {
    navigateTo('/pages/editMarker/index?type=' + type);
}
// 点击记事本
const clickNotepad = () => {
    notShow.value = true
    apiNotepadRecord()
}
// 添加记事本
const clickAddNotepad = () => {
    // 跳转添加信息
    navigateTo('/pages/editNotepad/index')
}
// 预览图片
const clickPrevimg = (url: string) => {
    uni.previewImage({
        showmenu: false,
        urls: [url],
        indicator: 'none'
    })
}
// 点击记录操作
const clickDeleteRecord = (id: string) => {
    recordID.value = id;
    isDeleteShow.value = true;
}
/**
 * @property 内置方法
 */
</script>
<template>
    <!-- <view class="w-[100vw] h-[100vh] z- over" >
    </view> -->
    <up-popup :show="props.isShow" mode="bottom" :round="8" :overlay="false">
        <div class="w-[100%] pl-3 pr-3 relative" :catchtouchmove="true">
            <div class="mt-2">
                <text class="font-size-32">{{ markerStore.marker?.alias }}</text>
                <div class="font-size-24 c-bluegray pr-6">{{ markerStore.marker?.toponym }}</div>
            </div>
            <!-- <div class="mt-2">
                <text class="font-size-32">备注</text>
                <div class="font-size-24 c-bluegray">{{ markerStore.marker?.notes }}</div>
            </div> -->
            <div class="mt-2" v-if="markerStore.marker.name">
                <text class="font-size-32">客户名称</text>
                <div class="font-size-24 c-bluegray">{{ markerStore.marker?.name }}</div>
            </div>
            <div v-if="isRetract">
                <div class="mt-2" v-if="markerStore.marker.phone">
                    <text class="font-size-32">客户手机号</text>
                    <div class="font-size-24 c-bluegray">{{ markerStore.marker?.phone }}</div>
                </div>
                <div class="mt-2 flex flex-col">
                    <text class="font-size-32">最近一次回访时间</text>
                    <div class="font-size-24 c-bluegray">{{ markerStore.marker?.lastfutime }}</div>
                </div>
                <div class="mt-2 flex flex-col">
                    <text class="font-size-32">回访渠道经理</text>
                    <div class="font-size-24 c-bluegray">{{ markerStore.marker?.manager }}</div>
                </div>
                <div class="mt-2 flex flex-col" v-if="markerStore.marker?.stock">
                    <text class="font-size-32">店铺目前库存</text>
                    <div class="font-size-24 c-bluegray">{{ markerStore.marker?.stock }}</div>
                </div>
                <div class="mt-2 flex flex-col" v-if="markerStore.marker?.activate">
                    <text class="font-size-32">本月已激活</text>
                    <div class="font-size-24 c-bluegray">{{ markerStore.marker?.activate }}</div>
                </div>
                <div class="mt-2 flex flex-col" v-if="markerStore.marker?.totalactivate">
                    <text class="font-size-32">累计激活</text>
                    <div class="font-size-24 c-bluegray">{{ markerStore.marker?.totalactivate }}</div>
                </div>
                <div class="mt-2 flex" v-if="markerStore?.picList?.length">
                    <div v-for="(v, i) in markerStore.picList" :key="i" class="mr-2 ">
                        <up-image :src="v.url" alt="" width="50" height="50" radius="8" @click="clickPrevimg(v.url)" />
                    </div>
                </div>
            </div>
            <div class="fc" @click="isRetract=!isRetract">
                <text class="mr-2">{{ isRetract ? '收起' : '展开' }}</text>
                <up-icon :name="isRetract ? 'arrow-up' : 'arrow-down'"></up-icon>
            </div>
            <div class=" flex justify-between w-[100%] h-100 items-center">
                <div class="font-size-24 flex">
                    <text @click="clickNotepad">记事</text>
                    <text class="ml-3" @click="clickEdit('applyForChanges')" v-if="authStaff()">申请变更信息</text>
                    <text class="ml-3" @click="navigateTo('/pages/cardProducts/index')">店铺卡品</text>
                </div>
                <div class="flex">
                    <div class="w-150 h-60 pb-1 mr-2">

                        <button class="but fc" open-type="share">分享</button>
                    </div>
                    <div class="w-150 h-60 pb-1">
                        <Bottom text="导航" @click="emits('nav')" />
                    </div>
                </div>
            </div>
            <div class=" absolute top-10 right-10" @click="emits('close')">
                <AliIcon icon-name="icon-icon_chahao_outline" font-size="50" />
            </div>
        </div>

    </up-popup>
    <up-popup :show="notShow" mode="bottom" :round="16" closeabl @close="() => { notShow = false; emits('close') }">
        <div class="h-[70vh] flex flex-col" :catchtouchmove="true">
            <div class="h-70  flex justify-end pr-2 pt-2">
                <div @click="() => { notShow = false; emits('close') }">
                    <AliIcon icon-name="icon-icon_chahao_outline" font-size="50" />
                </div>

            </div>
            <up-empty mode="history" v-if="notepadStore?.data?.length <= 0" />
            <div class="flex-1 overflow-hidden">
                <scroll-view class="w-[100%] h-[100%]" scroll-y>
                    <div class="pl-3 pr-3 mb-3" v-for="item in notepadStore.data" :key="item.fuid">
                        <div class="flex">
                            <div class="w-50 h-50 b-rd-[50%] bg-[#E8F3FF] c-[#275EFF] fc font-size-24">
                                {{ item.name?.split('')?.[0] || '-' }}
                            </div>
                            <div class="flex flex-col ml-4 flex-1">
                                <text class="font-size-24 c-[#545454]">{{ item.name || '--' }}&emsp;{{ item.time
                                    }}</text>
                                <text class="font-size-26">{{ item.content }}</text>
                            </div>
                            <div style="transform: rotate(90deg); height: 100rpx; width: 100rpx;" v-if="item.candel"
                                @click="clickDeleteRecord(item.fuid + '')">
                                <up-icon name="more-dot-fill" size="18"></up-icon>
                            </div>
                        </div>
                        <div class="pl-50rpx flex mt-2 ml-4">
                            <div v-for="(v, i) in item.imgs" :key="i" class="mr-2 ">
                                <up-image :src="imgPrefix + v" alt="" width="50" height="50" radius="8"
                                    @click="clickPrevimg(imgPrefix + v)" />
                            </div>

                        </div>
                    </div>
                </scroll-view>
            </div>

            <div class="w-[100%] h-64 pl-6 pr-6">
                <Bottom text="添加日志" @click="clickAddNotepad" />
            </div>
        </div>
    </up-popup>
</template>
<style lang="scss" scoped>
.but {
    padding: 0 !important;
    margin: 0;
    font-size: 24rpx;
    background: #fff;
    border: 2rpx solid #275EFF;
    height: 100%;
    border-radius: 64rpx;
    color: #275EFF;
}

.over {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10073;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
</style>